class Slider{
    constructor(selector){
        //实例属性
        //大盒子
        this.big_box = document.querySelector(selector);
        //ul-li(大图)
        this.ul_li = this.big_box.children[0].children;
        //大图数量
        this.num = this.ul_li.length;
        //添加元素-完善页面-返回小圆点
        this.ol_li = this.addEle();
        //初始化当前下标
        this.cur_index = 0;
        //实现功能
        this.slide();
        //添加事件
        this.addEvent();
        //自动轮播
        this.autoPlay();
    }
    //原型方法
    //添加元素
    addEle(){
        
        //     创建ol
        let ol = document.createElement('ol');
        //     创建数组，用于存储li
        let arr = [];
        //     根据大图的数量创建li
        for(let i = 0;i < this.num;i ++){
            let li = document.createElement('li');
        //     li -> ol
            ol.appendChild(li);
        //     li -> 数组
            arr.push(li);   
        }
        //     ol -> 大盒子中
        this.big_box.appendChild(ol);
        //返回数组（所有的li)
        return arr;
    }
    //实现功能
    slide(){
        // 1. 大图
        //     
        
        for(let i = 0;i < this.num;i ++){
            // 所有大图 - display - none
            this.ul_li[i].style.display = 'none';
            //     所有圆点- backgroundColor = red
            this.ol_li[i].style.backgroundColor = '#999';
        }
        //     当前大图 - display - block
        this.ul_li[this.cur_index].style.display = 'block';

        // 2. 圆点
        //     所有圆点- backgroundColor = red
        //     当前圆点-backgroundColor = blue
        this.ol_li[this.cur_index].style.backgroundColor = 'red';
       
    }
    //添加事件
    addEvent(){
       
        // 遍历小圆点-添加移入事件
        for(let i = 0;i < this.num;i ++){
            this.ol_li[i].onmouseenter = function(){
            //     当前下标 = 移入的下标
                this.cur_index = i;
            //     调用二、实现功能（轮播）
                this.slide();
            }.bind(this);
        }
        
    }
    //自动轮播
    autoPlay(){
        // 计时器(3000)
        //      当前下标 ++
        //     if(当前下标 === length){
        //         当前下标 = 0;
        //     }
        //     调用二、实现功能（轮播）
        this.timer =  setInterval(() => {
            //     当前下标 ++
            this.cur_index ++;
        //     if(当前下标 === length){
        //         当前下标 = 0;
        //     }
            if(this.cur_index === this.num){
                this.cur_index = 0;
            }
        //     调用二、实现功能（轮播）
            this.slide();
        }, 3000);
        //鼠标移入大盒子时，停止自动轮播
        this.big_box.onmouseenter = function(){
            clearInterval(this.timer);
        }.bind(this);
        //鼠标移出大盒子时，开启自动轮播
        this.big_box.onmouseleave = function(){
            this.autoPlay();
        }.bind(this);
    }
}
// new Slider('#slide1');